% !Mode:: "TeX:UTF-8"

\chapter{项目实现与部署}

\section{完成外卖软件——饿了吧 基础项目框架}

根据视频教程完成项目框架的搭建，并且完成项目最初版本的复现。

\vspace{1cm}  % 添加 1 厘米的垂直空白

\section{完善软件功能，细化设计}

\subsection{页面导航和用户体验}

\begin{enumerate}

\item{返回键添加}

为提升用户的导航体验，在应用的每个页面中（除了首页）都添加了返回键。此功能使用户能够方便地返回到上一个页面。当前图标已经添加，但仍需更新为透明样式，并进一步调整图标的位置，以确保在不同设备和屏幕尺寸下的可用性和美观性。


\item{购物车功能}

修复了购物车无法展开的问题，现在用户可以查看购物车中已购买商品的单价和数量。这一改进使用户能够更方便地管理和查看他们的购买商品，提升了购物体验。


\item{支付入口}

在历史未支付订单页面中添加了支付入口，使用户可以方便地对未支付的订单进行支付。这一功能简化了支付流程，提高了用户完成订单的效率。


\item{订单信息存储}

修复了订单中商品名称和价格修改时会影响历史订单记录的问题。现在系统在存储订单信息时会进行数据拷贝，从而保证历史订单的信息不受修改影响，保持了数据的准确性。


\item{地址信息}

解决了添加新收货地址时，用户信息显示不一致的问题。前端界面现已能够正确显示用户选定的地址信息，避免了用户在添加地址时的困扰。


\item{小数显示修正}

修复了订单页面中小数显示的 bug，现在小数点后的位数被限制为固定数量。这一修正确保了价格显示的准确性和一致性。


\item{列表遮挡问题}

调整了商家列表和食品列表的 CSS，解决了列表最后一个信息被底部菜单栏遮挡的问题。通过增加 `padding-bottom` 和调整 `margin-bottom`，确保列表内容完全可见，提升了用户界面的可用性。


\end{enumerate}

\vspace{1cm}  % 添加 1 厘米的垂直空白

\subsection{界面美化}
\begin{enumerate}
\item{CSS调整}

优化了项目的 CSS 设计，以改善页面的适配性，使其能够更好地支持不同机型和分辨率。这些调整提升了页面的响应式设计，使其在各种屏幕尺寸和设备上都能提供良好的用户体验。


\item{Vue版本升级}

将前端项目的 Vue 框架升级到 Vue 3，这一升级提升了应用的性能和开发效率。Vue 3 的新特性如组合式 API 提供了更灵活的代码组织方式，使得项目的维护和扩展变得更加高效。

\end{enumerate}

\vspace{1cm}  % 添加 1 厘米的垂直空白

\subsection{后端接口和安全性}

\begin{enumerate}
\item{RESTful接口}

修正了接口设计中的问题，使其符合 RESTful 风格。这一改进提升了接口的标准化和一致性，使得前后端的通信更加清晰和高效。


\item{数据安全}

加强了数据的安全性，包括改进了参数加密和返回数据的封装，以防止敏感信息的泄露。这一措施提高了系统的数据保护水平。


\item{密码加密}

对用户注册时的密码进行了加密处理，增强了密码存储的安全性。采用了先进的加密算法，确保用户的密码信息不被泄露或破解。


\item{数据验证}

增加了对前端提交数据和用户身份的验证，防止恶意数据的提交和篡改。这一措施提高了系统的安全性和数据的完整性。


\item{商家权限管理}

修复了商家端删除食品时未验证食品归属的问题，确保商家只能管理和删除自己管理的食品。这一改进防止了权限滥用和数据不一致的情况。


\item{库存管理}

引入了互斥锁机制，以防止超卖情况的发生。这一机制确保了库存数量的准确性，并避免了因并发操作造成的库存超卖问题。


\item{支付异常处理}

优化了支付接口的异常处理机制，防止因接口超时导致的重复扣款问题。这一改进增强了支付流程的稳定性和用户的财务安全。


\item{跨域处理}

改进了跨域处理方案，确保了项目能够在生产环境中正常部署。通过配置 CORS（跨域资源共享），解决了跨域请求的问题，保证了前后端数据的正常交换。


\end{enumerate}

\subsection{git提交记录}
由于github提交记录无法同步到gitee，故将部分提交记录在文档中附出

前端：

吕睿哲：负责静态网页开发，和vue2开发以及相关bug优化
\begin{figure}[H]
  \centering
  \includegraphics[width=0.6\textwidth]{git1}
  \caption{git1}
  \label{fig:git1}
  \vspace{\baselineskip}
\end{figure}

\begin{figure}[H]
  \centering
  \includegraphics[width=0.6\textwidth]{git2}
  \caption{git2}
  \label{fig:git2}
  \vspace{\baselineskip}
\end{figure}

\begin{figure}[H]
  \centering
  \includegraphics[width=0.6\textwidth]{git3}
  \caption{git3}
  \label{fig:git3}
  \vspace{\baselineskip}
\end{figure}

\begin{figure}[H]
  \centering
  \includegraphics[width=0.6\textwidth]{git4}
  \caption{git4}
  \label{fig:git4}
  \vspace{\baselineskip}
\end{figure}

杨锦陆：负责SRS书写前端测试bug以及修改bug，以及vue2向vue3的迁移
\begin{figure}[H]
  \centering
  \includegraphics[width=0.6\textwidth]{git5}
  \caption{git5}
  \label{fig:git5}
  \vspace{\baselineskip}
\end{figure}

\begin{figure}[H]
  \centering
  \includegraphics[width=0.6\textwidth]{git6}
  \caption{git6}
  \label{fig:git6}
  \vspace{\baselineskip}
\end{figure}

\begin{figure}[H]
  \centering
  \includegraphics[width=0.6\textwidth]{git7}
  \caption{git7}
  \label{fig:git7}
  \vspace{\baselineskip}
\end{figure}


谢浩然：负责后端开发和云端部署
\begin{figure}[H]
  \centering
  \includegraphics[width=0.6\textwidth]{git8}
  \caption{git8}
  \label{fig:git8}
  \vspace{\baselineskip}
\end{figure}

\begin{figure}[H]
  \centering
  \includegraphics[width=0.6\textwidth]{git9}
  \caption{git9}
  \label{fig:git9}
  \vspace{\baselineskip}
\end{figure}

\begin{figure}[H]
  \centering
  \includegraphics[width=0.6\textwidth]{git10}
  \caption{git10}
  \label{fig:git10}
  \vspace{\baselineskip}
\end{figure}

\begin{figure}[H]
  \centering
  \includegraphics[width=0.6\textwidth]{git11}
  \caption{git11}
  \label{fig:git11}
  \vspace{\baselineskip}
\end{figure}

\begin{figure}[H]
  \centering
  \includegraphics[width=0.6\textwidth]{git12}
  \caption{git12}
  \label{fig:git12}
  \vspace{\baselineskip}
\end{figure}

\begin{figure}[H]
  \centering
  \includegraphics[width=0.6\textwidth]{git13}
  \caption{git13}
  \label{fig:git13}
  \vspace{\baselineskip}
\end{figure}

\begin{figure}[H]
  \centering
  \includegraphics[width=0.6\textwidth]{git14}
  \caption{git14}
  \label{fig:git14}
  \vspace{\baselineskip}
\end{figure}

\vspace{1cm}  % 添加 1 厘米的垂直空白

\section{项目部署}

\subsection{部署概述}
\begin{enumerate}
\item {目标}
将“饿了吧”Java开发项目从IntelliJ IDEA开发环境迁移到其他环境，确保Spring Boot应用程序能够稳定运行。本文档将详细描述如何在生产环境中部署Spring Boot应用，包括准备环境、打包应用、配置系统、测试和验证系统，以及回滚计划。
\item {总体过程}
   \begin{enumerate}
    \item 准备生产环境
    \item 打包Spring Boot
    \item 打包Vue
    \item 配置生产环境
    \item 部署和启动应用
    \item 测试和验证系统
    \item 处理常见问题
   \end{enumerate}
\end{enumerate}

\vspace{1cm}  % 添加 1 厘米的垂直空白

\subsection{环境要求}
\begin{enumerate}
    \item {硬件要求}
    服务器：至少1台服务器或计算机

    CPU：至少2核(vCPU)
  
    内存：至少2GiB

    存储：至少8GB的存储空间
    \item {操作系统}
    操作系统:Windows 10/11
    \item {网络要求}
    网络带宽：至少100Mbps

    防火墙：配置开放必要的端口（如80, 443, 8080）
    \item {运行环境要求}
    JDK版本：JDK17

    数据库：MySQL 8.0以上版本 
\end{enumerate}

\vspace{1cm}  % 添加 1 厘米的垂直空白

\subsection{安装步骤}
\begin{enumerate}
    \item {准备服务器}
    本次云端部署使用阿里云服务器，创建新的阿里云服务器实例，以下为服务器基本配置信息：
    
    选择Windows系统，版本为windows11
    \begin{figure}[H]
        \centering
        \includegraphics[width=0.6\textwidth]{zhunbeifuwuqi}
        \caption{准备服务器}
        \label{fig:zhunbeifuwuqi}
        \vspace{\baselineskip}
    \end{figure}
    \item {打包springboot应用}
    \begin{enumerate}
        \item {配置构建工具} 
        使用Maven，确保在`pom.xml`中配置了Spring Boot插件,所需配置如下：
\begin{verbatim}
        <dependencies>
         <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-starter-jdbc</artifactId>
         </dependency>
         <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-starter-web</artifactId>
         </dependency>
         <dependency>
           <groupId>org.mybatis.spring.boot</groupId>
           <artifactId>mybatis-spring-boot-starter</artifactId>
           <version>3.0.3</version>
         </dependency>
         <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-devtools</artifactId>
           <scope>runtime</scope>
           <optional>true</optional>
         </dependency>
         <dependency>
           <groupId>com.mysql</groupId>
           <artifactId>mysql-connector-j</artifactId>
           <scope>runtime</scope>
         </dependency>
         <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-starter-test</artifactId>
           <scope>test</scope>
         </dependency>
         <dependency>
           <groupId>org.mybatis.spring.boot</groupId>
           <artifactId>mybatis-spring-boot-starter-test</artifactId>
           <version>3.0.3</version>
           <scope>test</scope>
         </dependency>
         <dependency>
           <groupId>javax.validation</groupId>
           <artifactId>validation-api</artifactId>
           <version>2.0.1.Final</version>
         </dependency>
        </dependencies>
\end{verbatim}


补充配置如下，此处version、name等均可自己决定
\begin{figure}[H]
    \centering
    \includegraphics[width=0.6\textwidth]{dabaospringboot}
    \caption{打包springboot应用}
    \label{fig:dabaospringboot}
    \vspace{\baselineskip}
\end{figure}
        \item {构建JAR文件}
        在IDEA中，打开`Maven`工具窗口，运行clean，随后运行package，生成jar文件。
        \begin{figure}[H]
            \centering
            \includegraphics[width=0.6\textwidth]{goujianjar1}
            \caption{构建JAR文件1}
            \label{fig:goujianjar1}
            \vspace{\baselineskip}
        \end{figure}

        生成的jar文件通常位于target文件中

        \begin{figure}[H]
            \centering
            \includegraphics[width=0.6\textwidth]{goujianjar2}
            \caption{构建JAR文件2}
            \label{fig:goujianjar2}
            \vspace{\baselineskip}
        \end{figure}
           
    \end{enumerate}
    
    \item {打包vue}
 
    
    \item {配置生产环境}
    \begin{enumerate}
      \item {在本地远程连接云服务器，输入正确的ip地址，用户名、密码}
      
      \begin{figure}[H]
        \centering
        \includegraphics[width=0.6\textwidth]{yuanchenglianjie}
        \caption{远程连接}
        \label{fig:yuanchenglianjie}
        \vspace{\baselineskip}
    \end{figure}

    连接成功后开始配置服务器运行所需环境
       
      \item {安装数据库，创建数据库和用户，配置数据库}
安装Mysql数据库，官网下载配置即可。此处选择8.0.26版本。

按一般要求创建用户名密码，配置环境变量即可。此处应与spring boot项目中的相关配置保持一致。

将原来本地数据库导出为.sql文件，导入到新配置的数据库中。

此处还可以选择下载datagrip等图形化数据库管理软件，方便操作和管理云端数据库。
\begin{figure}[H]
  \centering
  \includegraphics[width=0.6\textwidth]{anzhuangshujuku}
  \caption{安装数据库}
  \label{fig:anzhuangshujuku}
  \vspace{\baselineskip}
\end{figure}

      \item {安装配置JDK}
      官网下载JDK17，配置好环境变量即可。
      \item {安装配置nginx}
      官网下载安装nginx，此处选择版本为nginx1.26.2，配置好环境变量
    \end{enumerate}
        
  
    \item {部署和启动应用}
    \begin{enumerate}
      \item {上传JAR文件：}
      将生成的JAR文件上传到阿里云服务器，在桌面（任意位置均可）创建文件夹，将elmmmm.jar放入文件夹中。
      
      \begin{figure}[H]
        \centering
        \includegraphics[width=0.6\textwidth]{shangchuanjar}
        \caption{上传JAR文件}
        \label{fig:shangchuanjar}
        \vspace{\baselineskip}
      \end{figure}
     
      \item {启动Spring Boot应用：}
      在该文件夹下启动命令行，输入java -jar elmmmm.jar 启动springboot，即启动成功
      
      \begin{figure}[H]
        \centering
        \includegraphics[width=0.6\textwidth]{qidongspringboot}
        \caption{启动springboot}
        \label{fig:qidongspringboot}
        \vspace{\baselineskip}
      \end{figure}

      \item {上传vue打包文件，如图所示，将dist文件存入nginx-1.26.2/html中}
      \begin{figure}[H]
        \centering
        \includegraphics[width=0.6\textwidth]{shangchuanvue}
        \caption{上传vue打包文件}
        \label{fig:shangchuanvue}
        \vspace{\baselineskip}
      \end{figure}

      \item {在文件夹下运行start nginx 即可}
      \begin{figure}[H]
        \centering
        \includegraphics[width=0.6\textwidth]{yunxingnginx}
        \caption{运行nginx}
        \label{fig:shangchuanvue}
        \vspace{\baselineskip}
      \end{figure}
      启动应用成功

      http://123.57.94.78:8081

      在浏览器中输入该网址，即可进入页面
    \end{enumerate}
\end{enumerate}

\vspace{1cm}  % 添加 1 厘米的垂直空白

\subsection{配置管理}
\begin{enumerate}
   \item {配置文件}
   \begin{enumerate}
    \item {数据库配置}
    编辑application.properties文件，配置数据库连接信息，如图所示，此处root，password匹配云端数据库
    \begin{figure}[H]
        \centering
        \includegraphics[width=0.6\textwidth]{shujukupeizhi}
        \caption{数据库配置}
        \label{fig:shujukupeizhi}
        \vspace{\baselineskip}
    \end{figure}
   
    \item {连接配置}
    编辑WebMvcConfig.java文件，配置访问信息，此处允许localhost和云服务器ip地址访问
    \begin{figure}[H]
        \centering
        \includegraphics[width=0.6\textwidth]{lianjiepeizhi}
        \caption{连接配置}
        \label{fig:lianjiepeizhi}
        \vspace{\baselineskip}
    \end{figure}
    \item {nginx应用配置}
    需要修改nginx配置文件，将nginx.conf中server部分的监听端口listen修改为8081,server\_name对应云服务器的ip地址。
    \begin{figure}[H]
        \centering
        \includegraphics[width=0.6\textwidth]{nginx}
        \caption{nginx应用配置}
        \label{fig:nginx}
        \vspace{\baselineskip}
    \end{figure}
 \end{enumerate}
   \item {环境变量}
\end{enumerate}

\vspace{1cm}  % 添加 1 厘米的垂直空白

\subsection{依赖关系}
\begin{enumerate}
    \item 软件依赖    
\begin{itemize}
    \item {Java SDK：OpenJDK 17或以上版本}
    \item {Spring Boot：Spring Boot 3.3}
    \item {MySQL: MySQL 8.0以上版本}
    \item {Nginx: Nginx 1.26.3}
\end{itemize}
        
    \item 服务依赖
        
    网络服务：确保网络连通性，配置阿里云安全组规则以允许必要端口的访问。
        \begin{figure}[H]
        \centering
        \includegraphics[width=0.6\textwidth]{fuwuyilai}
        \caption{服务依赖}
        \label{fig:fuwuyilai}
        \vspace{\baselineskip}
    \end{figure}
\end{enumerate}

\vspace{1cm}  % 添加 1 厘米的垂直空白

\subsection{测试与验证}
功能测试：
\begin{enumerate}
    \item 访问应用
        
    通过浏览器访问`http://123.57.94.78:8081`，检查主页面是否加载正常。
    \begin{figure}[H]
        \centering
        \includegraphics[width=0.3\textwidth]{fangwenyingyong}
        \caption{访问应用}
        \label{fig:fangwenyingyong}
        \vspace{\baselineskip}
    \end{figure}
        
    \item 登录验证
        
    测试用户登录功能，确保能够成功登录并访问应用。
        \begin{figure}[H]
        \centering
        \includegraphics[width=0.3\textwidth]{dengluyanzheng}
        \caption{登录验证}
        \label{fig:dengluyanzheng}
        \vspace{\baselineskip}
    \end{figure}
\end{enumerate}

\vspace{1cm}  % 添加 1 厘米的垂直空白

\subsection{常见问题及解决方法}
\begin{enumerate}
\item 问题：数据库连接失败

解决方法：检查application.properties中的数据库连接信息，确认数据库是否运行正常，用户名和密码是否正确。

\item 问题：无法访问页面或者远程连接失败

解决方法：检查阿里云安全组规则是否正确配置，建议打开所有端口。

\item 问题：云服务器和本地无法访问，返回信息为403 forbidden

解决方法：查看WebMvcConfig.java中.allowedOrigins是否正确配置

\end{enumerate}
